<template>
	<div>
		<div class="mui-card" v-for="(item,index) in shopcard" :key='index'>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
					<div class="container">
						<img :src="item.img" />
						<div class="container-right">
							<p class="title">{{ item.title }}</p>
							<span class="price">￥{{ item.now }}</span>
							<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
							<span class="del" @click="remove(item.id,index)">删除</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<div class="pay_container">
						<div class="left">
							<p>总计(不含运费)</p>
							<p>已勾选商品<span class="red"> {{$store.getters.getGoodsCountAndAmount.count}} </span>件,总价<span class="red"> ￥{{$store.getters.getGoodsCountAndAmount.amount}} </span></p>
						</div>
						<div class="button">
							<mt-button type="danger">去结算</mt-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import numbox from '../subcomponents/shopcar_number.vue'
	export default {
		data() {
			return {
				shopcard: [],
			}
		},
		created() {
			this.getShopCard();
		},
		methods: {
			getShopCard() {
				var idArr = [];
				this.$store.state.car.forEach(item => idArr.push(item.id));
				console.log(idArr);
				if(idArr.length <= 0) {
					return;
				}
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {
						//											console.log(result.body.news_datas)
//						this.shopcard = result.body.goods;
						idArr.forEach(item => {
							this.shopcard.push(result.body.goods[item]) 
							console.log(this.shopcard)
						})
						//						console.log(this.shopcard);
					} else {
						Toast('获取新闻详细信息失败...');
					}
				})
			},
			remove(id,index){
				this.shopcard.splice(index,1);
				this.$store.commit("removeFormCar",id)
			},
			selectedChange(id,state){
				console.log(id +'----'+ state)
				this.$store.commit("updateGoodsSelected",{id,selected:state})
			}
		},
		components: {
			numbox
		},
	}
</script>

<style lang="scss" scoped>
	.mui-card-content-inner {
		display: flex;
		flex-direction: row;
		.container {
			display: flex;
			flex-direction: row;
			margin-left: 8px;
			img {
				width: 55px;
				height: 80px;
				box-shadow: 0 0 1px #000000;
				border: 2px solid #fff;
			}
			.container-right {
				margin-top: 10px;
				margin-left: 5px;
				.title {
					font-size: 12px;
					color: #000;
					font-weight: bold;
				}
				.price {
					font-size: 12px;
					color: red;
				}
				.del {
					font-size: 12px;
					color: blue;
					margin-left: 8px;
				}
			}
		}
	}
	.pay_container{
		display: flex;
		align-items: center;
		.red{
			color: red;
			font-weight: bold;
		}
		.button{
			margin-left: 70px;
		}
	}
</style>